<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>SIGN UP</title>
        <style type="text/css">
            @import url("layout.css");
            @import url("forms.css");
            /* All form elements are within the definition list for this example */
            dl {
                font:normal 12px/15px Arial;
                position: relative;
                width: 350px;
            }
            dt {
                clear: both;
                float:left;
                width: 130px;
                padding: 4px 0 2px 0;
                text-align: left;
            }
            dd {
                float: left;
                width: 200px;
                margin: 0 0 8px 0;
                padding-left: 6px;
            }


            /* The hint to Hide and Show */
            .hint {
                display: none;
                position: absolute;
                right: -250px;
                width: 200px;
                margin-top: -4px;
                border: 1px solid #c93;
                padding: 10px 12px;
                /* to fix IE6, I can't just declare a background-color,
                I must do a bg image, too!  So I'm duplicating the pointer.gif
                image, and positioning it so that it doesn't show up
                within the box */
                background: #ffc url(pointer.gif) no-repeat -10px 5px;
            }

            /* The pointer image is hadded by using another span */
            .hint .hint-pointer {
                position: absolute;
                left: -10px;
                top: 5px;
                width: 10px;
                height: 19px;
                background: url(pointer.gif) left top no-repeat;
            }
        </style>
        <script type="text/javascript">
            function addLoadEvent(func) {
                var oldonload = window.onload;
                if (typeof window.onload != 'function') {
                    window.onload = func;
                } else {
                    window.onload = function() {
                        oldonload();
                        func();
                    }
                }
            }

            function prepareInputsForHints() {
                var inputs = document.getElementsByTagName("input");
                for (var i=0; i<inputs.length; i++){
                    // test to see if the hint span exists first
                    if (inputs[i].parentNode.getElementsByTagName("span")[0]) {
                        // the span exists!  on focus, show the hint
                        inputs[i].onfocus = function () {
                            this.parentNode.getElementsByTagName("span")[0].style.display = "inline";
                        }
                        // when the cursor moves away from the field, hide the hint
                        inputs[i].onblur = function () {
                            this.parentNode.getElementsByTagName("span")[0].style.display = "none";
                        }
                    }
                }
                // repeat the same tests as above for selects
                var selects = document.getElementsByTagName("select");
                for (var k=0; k<selects.length; k++){
                    if (selects[k].parentNode.getElementsByTagName("span")[0]) {
                        selects[k].onfocus = function () {
                            this.parentNode.getElementsByTagName("span")[0].style.display = "inline";
                        }
                        selects[k].onblur = function () {
                            this.parentNode.getElementsByTagName("span")[0].style.display = "none";
                        }
                    }
                }
            }
            addLoadEvent(prepareInputsForHints);
        </script>

    </head>
    <body>
        <div id="wrap">
            <div id="topbar">
                <ul><li><a href="account?page=home">Home</a></li>
                    <li class="current"><a href="account?page=register">Register</a></li>
                    <li></li>
                    <li></li>
                </ul>
            </div>
            <div id="header">
                <div id="sitename">
                    <h1 id="logo">O-NICK</h1>
                    <p>PEMESANAN TIKET EVENT ONLINE </p>
                </div>
                <div id="shoutout"><img src="images1/joinnow_shoutout.jpg" alt="Join Now" width="168" height="126" /></div>
                <div id="useractions"></div>
            </div>
            <div id="content">
                <div id="home_main_center">
                    <div id="search">
                        <div class="tab">
                            <div class="container">
                                <div align="center"></div>
                                <h2 align="center">REGISTER HERE !!! ${error}</h2><br>
                                    <p align="center">&nbsp; </p>
                                    <form id="form1" method="post" action="account?page=registered" >
                                        <table align="center" class="search_form" style="width:100%; border:none;">
                                            <tr>
                                                <td class="label">Name</td>
                                                <td colspan="3"><label>
                                                        <input type="text" name="nama" id="nama" value="${tempReg.nama}" class="text longfield" />

                                                    </label></td>
                                            </tr>
                                            <tr>
                                                <td class="label">Address</td>
                                                <td colspan="3"><label>
                                                        <input type="text" name="alamat" id="alamat" value="${tempReg.alamat}" class="text longfield"/>
                                                    </label></td>
                                            </tr>
                                            <tr>
                                                <td class="label">Phone</td>
                                                <td colspan="3"><label>
                                                        <input type="text" name="telepon" id="telepon" value="${tempReg.telepon}" class="text longfield"/>
                                                    </label></td>
                                            </tr>
                                            <tr>
                                                <td class="label">Email</td>
                                                <td colspan="3"><label>
                                                        <input type="email" name="email" id="email" value="${tempReg.email}" class="text longfield" />
                                                    </label></td>
                                            </tr>
                                            <tr>
                                                <td class="label">Username</td>
                                                <td colspan="3"><label>
                                                        <input type="text" name="username" id="username" value="${tempReg.username}" class="text longfield" />
                                                    </label></td>
                                            </tr>
                                            <tr>
                                                <td class="label">Password</td>
                                                <td colspan="3"><label>
                                                        <input type="password" name="password" id="password" class="text longfield" />
                                                    </label></td>
                                            </tr>
                                            <tr>
                                                <td class="label">Confirm Password</td>
                                                <td colspan="3"><label>
                                                        <input type="password" name="confirmPassword" id="confirmPassword" class="text longfield" />
                                                    </label></td>
                                            </tr>
                                            <tr>
                                                <td class="label"><p>&nbsp;</p>
                                                    <p>&nbsp;</p>
                                                    <p>&nbsp;</p>
                                                    <p>&nbsp;</p>
                                                    <p>&nbsp;</p>
                                                    <p>&nbsp;</p></td>
                                                <td>&nbsp;</td>
                                                <td colspan="2" class="label"><label>
                                                        <div align="left">
                                                            <input type="image" src="images1/regbtn.gif" alt="search " name="button2" id="button2" value="Submit" onclick="return form1"/>
                                                            <br />
                                                            <br />
                                                        </div>
                                                    </label></td>
                                            </tr>
                                        </table>
                                    </form>
                            </div>
                        </div>
                    </div>
                    <div class="clear">&nbsp;
                        <p>&nbsp;</p>
                        <p>&nbsp;</p>
                        <p>&nbsp;</p>
                        <p>&nbsp;</p>
                        <p>&nbsp;</p>
                        <p>&nbsp;</p>
                        <p>&nbsp;</p>
                        <p>&nbsp;</p>
                        <p>&nbsp;</p>
                        <p>&nbsp;</p>
                        <p>&nbsp;</p>
                        <p>&nbsp;</p>
                        <p>&nbsp;</p>
                        <p>&nbsp;</p>
                        <p>&nbsp;</p>
                        <p>&nbsp;</p>
                        <p>&nbsp;</p>
                        <p>&nbsp;</p>
                        <p>&nbsp;</p>
                        <p>&nbsp;</p>
                        <p>&nbsp;</p>
                        <p>&nbsp;</p>
                        <p>&nbsp;</p>
                        <p>&nbsp;</p>
                        <p>&nbsp;</p>
                        <p>&nbsp;</p>
                        <p>&nbsp;</p>
                        <p>&nbsp;</p>
                        <p>&nbsp;</p>
                        <p>&nbsp;</p>
                        <p>&nbsp;</p>
                        <p>&nbsp;</p>
                        <p>&nbsp;</p>
                    </div>
                </div>
                </div>
        </div>
    </body>
</html>